import { debounce } from '__UTILS__/throttle.js'

export default {
  methods: {
    //获取可视高度
    getWindowHeight() {
      return document.documentElement.clientHeight
    },
    //获取滚动高度
    getScrollHeight() {
      return Math.max(document.documentElement.scrollTop, window.pageYOffset || 0) 
    },
    //获取文档高度
    getDocumentHeight() {
      try {
        const {bottomElement} = this
        const {height} = bottomElement.getBoundingClientRect()
        return height || document.documentElement.offsetHeight
      }catch(e) {
        console.log('没有定义最低元素')
      }
    },
    async scroll(){
      //判断是否到底
      if(this.getWindowHeight() + this.getScrollHeight() + 5 >= this.getDocumentHeight()) {
        // console.log('触发加载数据，解除事件绑定')
        //移除监听事件
        window.removeEventListener('scroll', this.scroll)
        //触发 加载数据 事件
        const needUpdateFlag = await this.loadData()
        // console.log('更新数据成功，，等待DOM渲染', 'needUpdateFlag', needUpdateFlag)
        // 更新数据成功和DOM才绑定 重新绑定监听事件
        if(needUpdateFlag) { //如果需要更新
          this.$nextTick(()=>{
            window.addEventListener('scroll', this.scroll) // console.log('DOM更新完成，，重新绑定事件')
          })
        }else { //不需要更新直接绑定
          window.addEventListener('scroll', this.scroll) // console.log('DOM更新完成，，重新绑定事件')
        }
      }else {
        // console.log('还没到呢')
      }
    },
    //默认数据加载
    loadData() {
      return new Promise((resolve, reject)=>{
        setTimeout(()=>{
          // resolve('加载数据')
          window.addEventListener('scroll', this.scroll)
        }, 2000)
      })
    },
    listenWindowScroll() {
      window.addEventListener('scroll', this.scroll);
      //卸载
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('scroll', this.scroll)
      })
    },
  }
}